<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta name="renderer" content="webkit">
    <title></title>
    <link rel="stylesheet" href="css/pintuer.css">
    <link rel="stylesheet" href="css/admin.css">
    <script src="js/jquery.js"></script>
    <script src="js/pintuer.js"></script>
    <script type="text/javascript">
        var totalPageCount;
        var page;
        // 页面加载执行
        $(function () {
            // 页面加载完成进行首次查询：index=1
            pageAjax(1)
            // 给不同超链接绑定点击事件：
            // 1.首页
            $("#first").click(function () {
                console.log("首页")
                pageAjax(1)
            })
            // 2.尾页
            $("#last").click(function () {
                console.log("尾页")
                pageAjax(totalPageCount)
            })
            // 3.上一页
            $("#pre").click(function () {
                console.log("上一页")
                if (page > 1) {
                    pageAjax(page - 1)
                } else {
                    alert("已经是第一页了!")
                }
            })
            // 4.下一页
            $("#next").click(function () {
                console.log("下一页")
                if (page < totalPageCount) {
                    pageAjax(page + 1)
                } else {
                    alert("已经是最后一页了!")
                }
            })
        })

        /**
         * 页面加载执行
         * @param index
         */
        function pageAjax(index) {
            // 页面加载后发送ajax请求：第四个参数："json"-预期服务器返回值类型-返回json数据，不写的话过来的就是字符串就不能处理了。
            // result接收到的是json字符串，加上第四个参数："json"，就可以直接转为json对象了
            $.post("/sms/offlineSchool/classServlet.do", "method=findAllClassesNew&page=" + index, function (res) {
                //清空tbody中内容：
                $("#tbody").empty()
                //将最大页数赋值给totalPageCount:
                totalPageCount = res.totalPageCount
                //当前页数赋值给page:
                page = index
                // alert(res)
                // $.each可以对json对象遍历： i:索引 e是每个对象
                $.each(res.list, function (i, e) { //在tbody中追加tr
                    $("#tbody").append('<tr>\n'
                        + ' <td style="text-align:left; padding-left:20px;">' + e.cid + '</td>\n'
                        + ' <td>' + e.cname + '</td>\n' + ' <td>' + e.clocation + '</td>\n'
                        + ' <td>' + e.desc + '</td> \n' + ' <td><div class="button-group"> <a class="button border-main" href="/sms/offlineSchool/classServlet.do?method=findOneClass&cid='+e.cid+'"><span class="icon-edit"></span> 修改</a> <a class="button border-red" href="javascript:void(0)" onclick="return del(' + e.cid + ')"><span class="icon-trash-o"></span> 删除</a> </div></td>\n' + ' </tr>')
                })
                // 每次清空span
                $("#pageSpan").empty()
                // 遍历数组内容展示在页面
                $.each(res.pageNums, function (i, e) {
                    $("#pageSpan").append('<a href="javascript:void(0)" id="page' + e + '" onclick="pageAjax(' + e + ')">' + e + '</a>')
                })
                // 当前页高亮显示
                $("#page" + page).css("backgroundColor", "#43A2FF")
            }, "json")
        }
    </script>
</head>
<body>
<form method="post" action="" id="listform">
    <div class="panel admin-panel">
        <div class="panel-head"><strong class="icon-reorder"> 班级列表</strong> <a href=""
                                                                                   style="float:right; display:none;">添加字段</a>
        </div>
        <table class="table table-hover text-center">
            <tr>
                <th width="100" style="text-align:left; padding-left:20px;">ID</th>
                <th width="10%">班级名称</th>
                <th>班级位置</th>
                <th>班级描述</th>
            </tr>

            <!--            <tr>-->
            <!--                <td style="text-align:left; padding-left:20px;">1</td>-->
            <!--                <td>java301班</td>-->
            <!--                <td>办公写字楼A座301</td>-->
            <!--                <td>个别同学基础偏弱，完全零基础，希望老师讲课照顾小白。</td>-->
            <!--                <td>-->
            <!--                    <div class="button-group"><a class="button border-main" href="add.html"><span-->
            <!--                            class="icon-edit"></span> 修改</a> <a class="button border-red" href="javascript:void(0)"-->
            <!--                                                                  onclick="del()"><span class="icon-trash-o"></span> 删除</a>-->
            <!--                    </div>-->
            <!--                </td>-->
            <!--            </tr>-->
            <!--            <tr>-->
            <!--                <td style="text-align:left; padding-left:20px;">2</td>-->
            <!--                <td>大数据602班</td>-->
            <!--                <td>办公写字楼C座602</td>-->
            <!--                <td>学员整体水平偏高，大多同学都有java工作经验，转大数据。</td>-->
            <!--                <td>-->
            <!--                    <div class="button-group"><a class="button border-main" href="add.html"><span-->
            <!--                            class="icon-edit"></span> 修改</a> <a class="button border-red" href="javascript:void(0)"-->
            <!--                                                                  onclick="del()"><span class="icon-trash-o"></span> 删除</a>-->
            <!--                    </div>-->
            <!--                </td>-->
            <!--            </tr>-->
            <!--            <tr>-->
            <!--                <td style="text-align:left; padding-left:20px;">3</td>-->
            <!--                <td>Python507班</td>-->
            <!--                <td>办公写字楼B座507</td>-->
            <!--                <td>学生均来自一个学校，都是同学。</td>-->
            <!--                <td>-->
            <!--                    <div class="button-group"><a class="button border-main" href="add.html"><span-->
            <!--                            class="icon-edit"></span> 修改</a> <a class="button border-red" href="javascript:void(0)"-->
            <!--                                                                  onclick="del()"><span class="icon-trash-o"></span> 删除</a>-->
            <!--                    </div>-->
            <!--                </td>-->
            <!--            </tr>-->

            <tbody id="tbody"></tbody>
            <tr>
                <td colspan="8">
                    <div class="pagelist">
                        <a href="javascript:void(0)" id="first">首页</a>
                        <a href="javascript:void(0)" id="pre">上一页</a>
                        <span id="pageSpan"></span>
                        <a href="javascript:void(0)" id="next">下一页</a>
                        <a href="javascript:void(0)" id="last">尾页</a>
                    </div>
                </td>
            </tr>
        </table>
    </div>
</form>
<script type="text/javascript">

    //搜索
    function changesearch() {

    }

    //单个删除
    function del(cid) {
        var f = confirm("您确定要删除吗?");
        if (f) {
            // 发送ajax请求，根据cid删除数据：
            $.post("/sms/offlineSchool/classServlet.do", {method: "deleteClassInfoByCid", cid: cid}, function (res) {
                if (res == 1) {
                    pageAjax(page)
                } else {
                    alert("删除失败!")
                }
            })
        } else {
            alert("取消删除操作")
        }
    }

    //全选
    $("#checkall").click(function () {
        $("input[name='id[]']").each(function () {
            if (this.checked) {
                this.checked = false;
            } else {
                this.checked = true;
            }
        });
    })

    //批量删除
    function DelSelect() {
        var Checkbox = false;
        $("input[name='id[]']").each(function () {
            if (this.checked == true) {
                Checkbox = true;
            }
        });
        if (Checkbox) {
            var t = confirm("您确认要删除选中的内容吗？");
            if (t == false) return false;
            $("#listform").submit();
        } else {
            alert("请选择您要删除的内容!");
            return false;
        }
    }

    //批量排序
    function sorts() {
        var Checkbox = false;
        $("input[name='id[]']").each(function () {
            if (this.checked == true) {
                Checkbox = true;
            }
        });
        if (Checkbox) {

            $("#listform").submit();
        } else {
            alert("请选择要操作的内容!");
            return false;
        }
    }


    //批量首页显示
    function changeishome(o) {
        var Checkbox = false;
        $("input[name='id[]']").each(function () {
            if (this.checked == true) {
                Checkbox = true;
            }
        });
        if (Checkbox) {

            $("#listform").submit();
        } else {
            alert("请选择要操作的内容!");

            return false;
        }
    }

    //批量推荐
    function changeisvouch(o) {
        var Checkbox = false;
        $("input[name='id[]']").each(function () {
            if (this.checked == true) {
                Checkbox = true;
            }
        });
        if (Checkbox) {


            $("#listform").submit();
        } else {
            alert("请选择要操作的内容!");

            return false;
        }
    }

    //批量置顶
    function changeistop(o) {
        var Checkbox = false;
        $("input[name='id[]']").each(function () {
            if (this.checked == true) {
                Checkbox = true;
            }
        });
        if (Checkbox) {

            $("#listform").submit();
        } else {
            alert("请选择要操作的内容!");

            return false;
        }
    }


    //批量移动
    function changecate(o) {
        var Checkbox = false;
        $("input[name='id[]']").each(function () {
            if (this.checked == true) {
                Checkbox = true;
            }
        });
        if (Checkbox) {

            $("#listform").submit();
        } else {
            alert("请选择要操作的内容!");

            return false;
        }
    }

    //批量复制
    function changecopy(o) {
        var Checkbox = false;
        $("input[name='id[]']").each(function () {
            if (this.checked == true) {
                Checkbox = true;
            }
        });
        if (Checkbox) {
            var i = 0;
            $("input[name='id[]']").each(function () {
                if (this.checked == true) {
                    i++;
                }
            });
            if (i > 1) {
                alert("只能选择一条信息!");
                $(o).find("option:first").prop("selected", "selected");
            } else {

                $("#listform").submit();
            }
        } else {
            alert("请选择要复制的内容!");
            $(o).find("option:first").prop("selected", "selected");
            return false;
        }
    }

</script>
</body>
</html>